<template>
    <div>
        <h1>分类列表</h1>
        <div class="typeList">
            <Item>
                <ul>
                    <li v--for="item in itemData[0].content" :key="item">
                        {{ item }}
                    </li>
                </ul>
            </Item>
            <Item>
                <ul>
                    <li v--for="item in itemData[1].content" :key="item">
                        {{ item }}
                    </li>
                </ul>
            </Item>
            <Item>
                <ul>
                    <li v--for="item in itemData[2].content" :key="item">
                        {{ item }}
                    </li>
                </ul>
            </Item>
        </div>
    </div>
</template>

<script>
import Item from "./components/Item";
export default {
    name: "App",
    components: {
        Item,
    },
    data() {
        return {
            itemData: [
                {
                    id: "001",
                    content: ["火锅", "烧烤", "螺蛳粉"],
                    title: "美食",
                },
                {
                    id: "002",
                    content: ["等你下课", "放学别走", "操场上见"],
                    title: "音乐",
                },
                { id: "003", content: ["CF", "DNF", "CS"], title: "游戏" },
            ],
        };
    },
};
</script>

<style scoped>
.typeList {
    display: flex;
    justify-content: space-around;
}
</style>
